<template>
    <div class="homes">
      <div class="swiper-box">
      <swiper :options="swiperOption" ref="mySwiper" class="swiper-warp">
        <!-- 幻灯内容 -->
        <SwiperSlide class="swiper-item" v-for="item in slides">
          <img :src="item.url">
        </SwiperSlide>

        <!--<div class="swiper-pagination" slot="pagination"></div>-->
        <!--<div class="swiper-button-prev" slot="button-prev"></div>-->
        <!--<div class="swiper-button-next" slot="button-next"></div>-->
        <!--<div class="swiper-scrollbar"  slot="scrollbar"></div>-->
      </swiper>
        <div class="paginaion-box" >
          <span v-for="(item,index) in slides" :class="[index==actIndex ? 'actindex' :'']" :key="index"></span>

        </div>
      </div>
      <div class="new_list">
        <ul>
          <li  v-for="(item,index) in news"  :class="[item.active ? 'newactive':'']"  @click="handleSelectList(index)"  :key="index">
            {{item.txt}}
          </li>
          <!--<li>政务信息-->
          <!--</li>-->
          <!--<li>-->
            <!--业务信息-->
          <!--</li>-->
          <li>
            <em></em>
          </li>
        </ul>
      </div>
      <div class="group_container" :is="setComponents" keep-alive>
          <!--<component  keep-alive></component>-->
      </div>
    </div>
</template>
<style scoped>
    body {
        /*background-color: #ff0000;*/
    }
    .home{
      width:100%;
    }
    .swiper-item{
      width:100%;

    }
    .swiper-item img{
      width:100%;
      height:3.2rem;
    }
  .paginaion-box{display:flex;
     justify-content: center;
    align-items: center;
    position:absolute;
    bottom:0;
    left:0;
    height:0.4rem;
    width:100%;

    z-index:3;
  }
  .paginaion-box span{
    width:0.35rem;
    height:0.04rem;
    margin-right:0.2rem;
    background:rgba(255,255,255,0.4);
    display:inline-flex;

  }
  .actindex{
    background:#fff !important;
  }
  .swiper-box{
    width:100%;
    position:relative;
  }



    .new_list>ul {
      display:flex;
      display:-webkit-flex;
      justify-content: space-between;
      box-sizing: border-box;
      height:100%;
      list-style: none;
    }

    .new_list{
      height:0.68rem;
      padding:0 0.3rem;
      border-bottom:1px solid #eee;
    }
    .new_list ul li{
      height:100%;
      font-size:0.26rem;
      text-align: left;
      box-sizing: border-box;
      position:relative;
      color:#666;
      line-height: 0.68rem;
    }
    .new_list ul li:last-child{
      width:6%;
      height:100%;
    }
    .new_list ul li:last-child:before{
      content:"";
      display:inline-block;
      width:0.48rem;
      height:0.48rem;
      background:url(../../static/zhengWu/more_selet.png) no-repeat center;
      background-size:cover;
      position:absolute;
      right:-0.1rem;
      top:50%;
      transform: translateY(-50%);
    }
    .newactive{
      color:#ff0033 !important;
      border-bottom:2px solid #ff0033;
    }
    .group_container{
      position:absolute;
      top:3.88rem;
      bottom:0;
      left:0;
      right:0;
    }






</style>
<script>
  import Vue from 'vue'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import NewList from '../components/NewList.vue';
  import Government from '../components/Government.vue';
  import Business from '../components/Business.vue';
  var setAllcomponents = NewList
  export default{
      //name:'home',

    components:{
      swiper,
      SwiperSlide:swiperSlide,
      NewList,
      Government,
      Business
    },
      data(){
            return {
              actIndex:0,
              setComponents:'NewList',
              slides:[{url:'../../static/zhengWu/pic_06.png',actin:true},
                {url:'../../static/zhengWu/img4.jpg',actin:false},
                {url:'../../static/zhengWu/pic_08.jpg',actin:false},
                {url:'../../static/zhengWu/pic_09.jpg',actin:false},
              ],
              swiperOption:{
                // 所有配置均为可选（同Swiper配置）
                //notNextTick: true,
                autoplay: 5000,
                grabCursor : true,
                setWrapperSize :true,
                autoHeight: true,
                //pagination : '.swiper-pagination',
                mousewheelControl : true,
                observeParents:true,
                onSlideChangeEnd:(swiper) => {
                this.actIndex = swiper.activeIndex}
              },
            news:[
              {txt:'通知公告',active:true},
              {txt:'政务信息',active:false},
              {txt:'业务信息',active:false}]
            }
        },
    methods:{
       handleSelectList(index){
          let setComponent = 'NewList'
          switch(index){
            case 0:
              setComponent = 'NewList'
             break;
            case 1:
              setComponent = 'Government'
              break;
            case 2:
              setComponent = 'Business'
              break;
          }
          this.setComponents = setComponent;
          for(let i = 0 ; i< this.news.length; i++){
              if(index==i){
                this.news[i].active = true;
              }else{
                this.news[i].active = false;
              }
          }

        }


    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper;
      }
    },
    mounted () {
      //这边就可以使用swiper这个对象去使用swiper官网中的那些方法
     // this.swiper.slideTo(0, 0, false);
    }


    }

</script>
